<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <style>
        body{
            background-image: url('https://wallpaperm.cmcm.com/live/preview_img_raw/6e74afc1948e42adb5817d5b20c5e3b2_preview_raw.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .form_css{
            border: 1px solid red;
            width: 600px;
            height: 400px;
            margin: auto;
            margin-top: 300px;
            display: flex;
            flex-direction: column;
            background-color: ghostwhite;
        }
        .form_css h1{
            margin: auto;
        }
        .form_css form{
            margin: auto;
        }
        #login{
            margin-left: 100px;
        }

    </style>
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
    <script src="{% static './layui/layui.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="form_css">
        <h1>我的后台管理系统</h1>
        <form class="layui-form" action="">
            <div id="login">
                <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label"><h3>账号</h3></label>
                  <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label"><h3>密码</h3></label>
                  <div class="layui-input-inline">
                    <input type="password" name="password"  lay-verify="password" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
layui.use(['form'], function(){
  var form = layui.form
  ,layer = layui.layer;

  //自定义验证规则
  form.verify({
    password: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
  });

  //监听提交
  form.on('submit(demo1)', function(data){
      // console.log(JSON.stringify(data.field))
      // debugger
      var phone = data.field['phone']
      var password = data.field['password']

      $.ajax({
        method: "POST",
        url: "{%url 'api:login_check' %}",
        data: { phone: phone, password: password},
        success: function (xxx) {
            if(xxx['code'] == 1){
                location.href="{%url 'test_admin:index' %}";
            }else{
                layer.msg(xxx['msg']);
                // debugger
            }
        },
        error: function(yyy) {
            // debugger
            console.log("失败了: " + yyy);
        }
      });
      return false;
  });
});
</script>
</html>